<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <title>Chats登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chats</title>
    <meta name="csrf-token" content="{{ csrf_token }}" />
    <link href="static/bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body style="background-color: rgb(51, 51, 51);">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="static/js/login.js"></script>
    <h1 class="h1" style="background-color: rgb(255, 255, 255);text-align: center; ">Chats登录</h1>
    <div style="margin-left:20%;width :60%">
      <form action="login" method="post">
        {% csrf_token %}
        <div class="form-floating mb-3 mt-3">
          <input type="text" class="form-control" id="email" placeholder="Enter email or username" name="email_or_username" />
          <label for="email">账号</label>
        </div>

        <div class="form-floating mt-3 mb-3">
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" />
          <label for="pwd">密码</label>
        </div>

        <div class="form-floating mb-3 mt-3">
        <input class="form-control" style = "width :50%" type="text" name="captcha" placeholder="code"/> 
        <label for="pwd">验证码</label>
        <br>
        <input value="{{ hashkey }}" name="hashkey" type="hidden" id="id_captcha_0">
        
        <a href="#" class="captcha" onclick="changeCaptcha();">
          <img src="{{ image_url }}" alt="点击切换" id="id_captcha" >
      </a>
        </div>
        <a style="color:rgb(255,0,0);">{{ login_error }}</a>
        <div style="text-align: center;">
          <button class="btn btn-primary" id="submit" type="submit" onclick="" style=" ">登录</button>
          <a class="btn btn-primary" href="/register">注册</a>
        </div>
      </form>
    </div>
  </body>
</html>
